var that
class Tab{
    constructor(id){
        that=this
        // 获取元素
        this.tab=document.querySelector(id)
        this.add=this.tab.querySelector('.tabAdd span')
        this.ul=this.tab.querySelector('ul')
        this.tabCon=this.tab.querySelector('.tabContent')
        //实例对象即调用类中的方法
        this.init()
    }
    // 因为是动态的 所以要更新节点
    updateNode(){
        this.lis=this.tab.querySelectorAll("li")
        this.sections=this.tab.querySelectorAll('section')
        this.guanbis=this.tab.querySelectorAll('.icon-guanbi')
    }
    
    init(){
        this.updateNode()
        this.add.onclick=this.addTab
        // 初始化给每个li绑定事件
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].index=i
            this.lis[i].onclick=this.toggleTab
            this.lis[i].ondblclick=this.editTab
            this.sections[i].ondblclick=this.editTab
            this.guanbis[i].onclick=this.removeTab
            
        }
    }
    // 单独封装了个清除所有类类名的方法
    clearClassName(){
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].className=''
            this.sections[i].className=''
        }
    }
    // 切换
    toggleTab(){
        // 排它法
        // 清除类名
        that.clearClassName()
        // 当前li和对应section活跃
        this.className="liActive"
        that.sections[this.index].className="sectionActive"
    }
    // 添加
    addTab(){
        that.clearClassName()
        var random=Math.random()
        // 创建两个元素
        var li='<li  class="liActive">'+'新选项卡'+'<span class="iconfont icon-guanbi"></span></li>'
        var section='<section class="sectionActive">'+random+'</section>'
        // 插入元素
        // 可插入文本是字符串的元素
        that.ul.insertAdjacentHTML('beforeend', li)
        that.tabCon.insertAdjacentHTML('beforeend', section)
        that.init()
    }
    // 删除
    removeTab(e){
        // 删除tab选型卡不需要选中样式，阻止冒泡
        e.stopPropagation()
        var index=this.parentNode.index
        // 删除指定节点 remove()方法
        that.lis[index].remove()
        that.sections[index].remove()
        // 删除节点也要更新节点
        that.init()
        // 当我们删除的是没有被选中的选项卡时，原有样式不变，也就是不执行这条语句下面的语句
        if(this.parentNode.className=="") return;
        // 让删除的前一个tab选项卡为指定样式
        index--
        that.clearClassName()
        // 手动调用点击事件，不需鼠标点击
        that.lis[index]&&that.lis[index].click()
        // 如果删的是第一个那么就跳转到第二个选型卡上
        !that.lis[index]&&that.lis[0].click()
    }
    // 修改
    editTab(){
        var str=this.innerText
        // 双击禁止选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML=(this.className=="liActive")?'<input type="text"/><span class="iconfont icon-guanbi"></span>':'<input type="text"/>'
        
        var input=this.children[0]
        input.value=str
        input.select()// 文本处于选中状态
        input.onblur=function(){
            this.parentNode.innerHTML=(this.parentNode.className=="liActive")?input.value+'<span class="iconfont icon-guanbi"></span>':input.value
        }
        input.onkeyup=function(e){
            if(e.keyCode==13){
                // 手动调用失去焦点事件，不需鼠标离开操作
                this.blur()
            }
        }
        
    }
}
new Tab('#tab')